<template>
  <div>
    Foo age: {{ age }} 十年后的年龄：{{ tenYearsOldAge }}

    <button @click="handleChangeAge">changeAge</button>

    <button @click="login">login</button>
  </div>
</template>

<script>
import { mapState } from "vuex";

// console.log(mapMutations(["setAge", "setName", "setTitle"]));
export default {
  computed: {
    ...mapState(["age"]),
    tenYearsOldAge() {
      return this.$store.state.age + 10;
    },
    // title() {
    //   return this.$store.state.title;
    // },
  },
  methods: {
    login() {
      this.$store.dispatch("login", {
        username: "xiaohong",
        password: "123",
      });
    },
    // ...mapMutations(["setAge", "setName", "setTitle"]),
    handleChangeAge() {
      // 修改的是谁
      // 直接修改的 state 里面的值
      // 问题
      // bug
      // 换 是谁修改的 age？
      // this.$store.state.age = 20;
      this.$store.commit("setAge", 20);
    },
    // setAge() {
    //   this.$store.state.age = 20;
    // },
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style></style>
